<template>
  <div class="bgcmain">
    <div class="main">
      <div class="flex">
        <div class="mtop cf flex aic jcc">全部商品分类</div>
        <div class="bgcf flex jcse f1">
          <span v-for="i in jobleft" class="tac w100 boder">{{ i }}</span>
        </div>
      </div>
      <div class="flex" @mouseleave="showModel = false">
        <div class="mcard">
          <div
            v-for="(i, index) in joinType"
            class="lineSpan"
            @mouseenter="leftMouse(index)"
          >
            <div>{{ i.name }}</div>
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="sonCard" v-if="showModel">
          <div class="pd8">
            <div class="fs14 mgb10">{{ joinType[leftActive].name }}</div>
            <div class="fs12" v-for="j in joinType[leftActive].children">
              <div class="flex jcsb">
                <div class="sonName">{{ j.name }}</div>
                <div class="flex fww f1">
                  <div class="minType" v-for="k in j.list">
                    <div>{{ k }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="sonCard"></div>
        <div class="rightBox flex column">
          <div class="mgb20 pd10">限时抢购</div>
          <div class="flex column aic">
            <van-count-down :time="time">
              <template #default="timeData">
                <span class="block">{{ timeData.days }}</span>
                <span class="colon">天</span>
                <span class="block">{{ timeData.hours }}</span>
                <span class="colon">小时</span>
                <span class="block">{{ timeData.minutes }}</span>
                <span class="colon">分钟</span>
                <span class="block">{{ timeData.seconds }}</span>
                <span class="colon">秒</span>
              </template>
            </van-count-down>
            <div class="txtWidth">
              <div class="shopBox"></div>
              <div class="van-multi-ellipsis--l3 fs12 mgt10">
                {{ stitle }}
              </div>
              <div class="flex jcsb prColor mgt8">
                <div>￥1.0</div>
                <div class="fwb">5折</div>
              </div>
            </div>
          </div>
          <div class="mgt20 f1 flex column">
            <div class="flex jcsb tac rightAdb">
              <span class="w100" @click="tick=1" :class="tick==1?'bgcf':'cspan'">商城公告</span>
              <span class="w100" @click="tick=2" :class="tick==2?'bgcf':'cspan'">招商入驻</span>
            </div>
            <div class="f1 bgcf pd10 fs14" v-if="tick=1">公告1</div>
            <div class="f1 bgcf pd10 fs14" v-else>公告2</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
@import "../../public.css";
@import "../../ui/vant-ui/ui.css";
.mcard {
  width: 250px;
  height: 500px;
  font-size: 14px;
  background-color: var(--primary-color);
  color: #fff;
  overflow-y: scroll;
}
.mtop {
  width: 250px;
  background-color: #666;
  height: 40px;
}
.sonCard {
  flex: 1;
  height: 500px;
  background-color: #fff;
  color: #000;
  border-top: 1px solid var(--primary-color);
  overflow-y: scroll;
}
.shopBox {
  background-color: #fff;
  height: 150px;
  margin-top: 20px;
}
.txtWidth {
  width: 150px;
  font-size: 12px;
}
.lineSpan {
  display: flex;
  justify-content: space-between;
  padding: 8px;
}
.lineSpan:hover {
  background-color: #fff;
  color: var(--primary-color);
}
.sonName {
  width: 70px;
  margin: 8px;
}
.minType {
  margin: 8px;
}
.minType:hover {
  color: var(--primary-color);
}
.boder {
  width: 60px;
  border-bottom: 2px solid #fff;
  transition: border-bottom 0.5s;
}
.boder:hover {
  border-bottom: 2px solid var(--primary-color);
}
.colon {
  display: inline-block;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 20px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
.rightBox {
  background-color: #f7f7f7;
  width: 210px;
}
.cspan {
  border-color: #666;
}
.rightAdb span{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
}
@media (min-width: 500px) {
  .main {
    width: 1400px;
    margin: 0 auto;
    /* background-color: #fff; */
  }
  .bgcmain {
    background-color: #0fe444;
  }
}
</style>
<script>
module.exports = {
  data() {
    return {
      joinType: [
        {
          name: "大类1",
          children: [
            {
              name: "标题1",
              list: [
                "子类1",
                "子类2",
                "子类3",
                "子类4",
                "子类5",
                "子类1",
                "子类2",
                "子类3",
                "子类4",
                "子类5",
                "子类1",
                "子类2",
                "子类3",
                "子类4",
                "子类5",
              ],
            },
          ],
        },
        {
          name: "大类2",
          children: [
            {
              name: "标题2",
              list: ["子类1", "子类2", "子类3", "子类4", "子类5"],
            },
          ],
        },
        {
          name: "大类3",
          children: [
            {
              name: "标题3",
              list: ["子类1", "子类2", "子类3", "子类4", "子类5"],
            },
          ],
        },
        {
          name: "大类4",
          children: [
            {
              name: "标题4",
              list: ["子类1", "子类2", "子类3", "子类4", "子类5"],
            },
          ],
        },
      ],
      jobleft: [
        "大类1",
        "大类2",
        "大类3",
        "大类4",
        "大类5",
        "大类6",
        "大类1",
        "大类2",
        "大类3",
        "大类4",
        "大类5",
        "大类6",
      ],
      showModel: false,
      leftActive: 0,
      time: 20 * 40 * 60 * 60 * 1000,
      stitle:
        "案说法数据库里发生了就爱上了感觉爱上了就爱上了飞机萨勒夫就撒了封杀了发拉法基萨勒夫就撒了放假啊说服力飞机爱上了对方就爱上了法律",
      tick:1,
    };
  },
  props: [],
  methods: {
    leftMouse(index) {
      this.leftActive = index;
      this.showModel = true;
    },
    tck(){
      this.tick=2;
    }
  },
};
</script>
